<template>
  <view class="padding-sm">
    <view class="app-header">
      <view class="cu-bar bg-white">
        <view class="action title-style-3">
          <text class="text-xl text-bold">我的健康指导</text>
          <text class="text-Abc text-cyan self-end margin-left-sm">about</text>
        </view>
      </view>
      <!-- 索引条 -->
      <ill-sub @clickSub="changeSub" ref="mySub"></ill-sub>
    </view>
    <!-- 健康指导列表 -->
    <view class="guidance-list" v-if="guidanceList && guidanceList.length > 0">
      <uni-section class="mb-10" title="指导历史">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <uni-collapse ref="collapse">
          <uni-collapse-item v-for="item in guidanceList" :key="item.id" :title="item.title">
            <view class="content padding-left padding-bottom">
              <view class="content-container">
                <text class="text-title">医生姓名：</text>
                <text class="text-content">{{item.doctorName}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">饮食指导：</text>
                <text class="text-content">{{item.dietaryAdvice}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">运动建议：</text>
                <text class="text-content">{{item.exerciseAdvice}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">创建时间：</text>
                <text class="text-content">{{item.createTime}}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </uni-section>
    </view>
    <view v-else>
      <empty-page container-height="100px" text="健康管理为空" />
    </view>
    <view style="height: 20px;"></view>
  </view>
</template>

<script>
  export default {
    beforeDestroy() {
      this.guidanceList = [];
    },
    methods: {
      // 跳转到顶部
      scrollToTop() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 0, // 设置一个很大的值，确保滚动到底部
            duration: 100, // 滚动动画的时长
          });
        })
      },
      // 跳转到底部
      scrollToBottom() {
        this.$nextTick(() => {
          uni.pageScrollTo({
            scrollTop: 9999, // 设置一个很大的值，确保滚动到底部
            duration: 300, // 滚动动画的时长
          });
        })
      },
      // 滚动到底部
      onReachBottom() {
        // 当滚动到底部时触发上拉加载更多
        this.loadMoreData();
      },
      // 下拉重载方法
      onPullDownRefresh() {
        // 重新加载数据
        this.resetData();
        this.loadMoreData();
      },
      // 加载更多数据
      loadMoreData() {
        // 如果已经没有更多数据或正在加载中，则不再进行加载
        if (this.paramObj.pageNum !== 1 && this.guidanceList.length >= this.total) {
          uni.$showMsg('数据已加载完毕!');
          return;
        } else if (this.isLoading) {
          uni.$showMsg('正在玩命加载中!');
          return;
        }
        this.isLoading = true; // 标记为正在加载中
        this.fetchData();
      },
      // 重新赋值
      resetData() {
        this.guidanceList = [];
        this.total = 0;
        this.paramObj.pageNum = 1;
      },
      changeSub(subId) {
        this.paramObj.subId = subId;
        this.resetData();
        this.fetchData();
        this.scrollToTop();
      },
      async fetchData() {
        // 判断subId
        if (!this.paramObj.subId) {
          return;
        }
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/guidance/list', this.paramObj)
        if (res.code !== 200) return uni.$showMsg();
        if (this.paramObj.pageNum === 1) {
          // 下拉重载，清空原有数据
          this.guidanceList = res.rows;
        } else {
          // 上拉加载，追加数据
          this.guidanceList = [...this.guidanceList, ...res.rows];
          this.scrollToBottom();
        }
        this.total = res.total;
        this.paramObj.pageNum++;
        this.isLoading = false; // 标记为加载完成
      }
    },
    data() {
      return {
        total: 0,
        isLoading: false,
        paramObj: {
          pageNum: 1,
          pageSize: 10,
          subId: undefined
        },
        guidanceList: []
      };
    }
  }
</script>

<style lang="scss">
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .guidance-list {
    position: relative;

    .decoration {
      width: 6px;
      height: 6px;
      margin-right: 4px;
      border-radius: 50%;
      background-color: #1cbbb4;
    }

    .content {
      .content-container {
        .text-title {
          color: #333;
          font-size: 13px;
          margin-right: 5px;
        }

        .text-content {
          font-size: 13px;
          color: #666;
        }
      }

    }
  }
</style>